<template>
  <div class="doctor-management">
    <Main title="医生管理">
      <template #btn>
        <Button type="primary" @click="goToAddDoctor">新增医生</Button>
      </template>
    </Main>
    <Card style="width: 98%;">
  <div class="search-bar">
        <Select v-model="searchParams.department" placeholder="请选择科室">
          <Option v-for="dept in departmentOptions" :value="dept.value" :key="dept.value">
            {{ dept.label }}
          </Option>
        </Select>
        <Input v-model="searchParams.name" placeholder="请输入医生姓名" />
        <Button type="primary" @click="fetchDoctors">搜索</Button>
      </div>

      <Table :columns="columns" :data="doctorList" stripe :loading="loading">
        <template #photo="{ row }">
          <Avatar :size="32" :src="row.photo || defaultAvatar" />
        </template>
        <template #action="{ row }">
          <Button type="text" size="small" @click="editDoctor(row.id)">编辑</Button>
          <Button type="text" size="small" @click="deleteDoctor(row.id)">删除</Button>
        </template>
        <template #empty>
          <div class="empty-state">
            <img src="https://picsum.photos/200/150" alt="暂无数据" />
            <p>暂无医生数据</p>
          </div>
        </template>
      </Table>

     <!-- 分页组件 -->
     <Page
    :total="total"
    :page-size="pageSize"
    :current="currentPage"
    @on-change="handlePageChange"
    align="right"
    show-elevator
    show-total
  />

    </Card>
   
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';

import { useRouter } from 'vue-router';
import "../../mockjs/doctorManagement/doctorMock"
import Main from '@/components/Main.vue';
import { fetchDoctors, deleteDoctor as apiDeleteDoctor } from '@/api/doctorManagmentModal/doctor';

import type { Doctor } from '@/api/doctorManagmentModal/doctor';
// 类型定义
interface Doctor {
  id: number;
  doctorName: string;
  photo: string;
  hospitalArea: string;
  department: string;
  position: string;
  status: boolean;
}

// 状态管理
const router = useRouter();
const searchParams = reactive({
  department: '',
  name: ''
});
const doctorList = ref<Doctor[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(5); // 每页显示5条数据
const defaultAvatar = ref('...');
const loading = ref(false);

// 表格配置
const columns = ref([
  { title: '医生姓名', key: 'doctorName' },
  { title: '头像', key: 'photo', slot: 'photo' },
  { title: '院区', key: 'hospitalArea' },
  { title: '科室', key: 'department' },
  { title: '职称', key: 'position' },
  { title: '状态', key: 'status', render: (h: any, { row }: any) => 
    h('span', row.status ? '启用' : '禁用') 
  },
  {title:"医生简介",key:"introduction"},
  { title: '操作', key: 'action', slot: 'action' }
]);

// 科室选项
const departmentOptions = ref([
  { value: 'department1', label: '内科' },
  { value: 'department2', label: '外科' },
  { value: 'department3', label: '妇产科' },
  { value: 'department4', label: '儿科' }
]);


// 获取医生列表
const allDoctors = ref<Doctor[]>([]); // 存储全量数据

const fetchDoctors1 = async () => {
  try {
    loading.value = true;
    const res = await fetchDoctors({});
    console.log("医生信息", res);

    allDoctors.value = res.data.data; // 存储全量数据
    total.value = allDoctors.value.length; // 设置总条数

    // 根据当前页码和每页数量进行切片
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    doctorList.value = allDoctors.value.slice(start, end);

    console.log('获取医生数据成功:', doctorList.value, total.value);
  } catch (error) {
    console.error('获取医生数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 操作方法
const goToAddDoctor = () => {
  router.push({ path: '/home/doctorManagmentModal', query: { action: 'add' } });
};

const editDoctor = (id: number) => {
  router.push({ path: '/home/doctorManagmentModal', query: { action: 'edit', id } });
};

const deleteDoctor = async (id: number) => {
  if (window.confirm('确定要删除该医生吗？')) {
    try {
      await apiDeleteDoctor(id);
      console.log('删除成功');
      fetchDoctors1();
    } catch (error) {
      console.error(error);
    }
  }
};

// 分页变化处理
const handlePageChange = (page: number) => {
  currentPage.value = page;
  fetchDoctors1(); // 触发重新分页
};

// 初始化
onMounted(() => {
  fetchDoctors1();
});
</script>

<style scoped>
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.empty-state img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  margin-bottom: 10px;
}
</style>